<template>
  <div class="basicsPage-container" style="overflow-y: auto">
    <maskLayer :isLoading="isLoading"/>
    <a-directory-tree :tree-data="treeNodeData" defaultExpandAll
                      :fieldNames="{title:'name', key:'menuId', children:'children'}">
      <template #title="{ name,menuId,nowPath,fullPath,iconTag,parentMenuId,menuOrder }">
        <span style="margin-left: 10px;margin-right: 10px">
          <component :is="iconTag"/>
        </span>
        <span>{{ name }}</span>
        <span style="margin-left: 20px;">路径：{{ fullPath }}</span>
        <!-- 修改 -->
        <a-button type="primary" shape="circle" style="float: right;right: 10px"
                  @click.stop="updateNodeClick(name,menuId,nowPath,iconTag,parentMenuId,menuOrder)">
          <template #icon>
            <EditOutlined/>
          </template>
        </a-button>
        <!-- 添加子节点 -->
        <a-button type="primary" shape="circle" style="float: right;right: 20px" @click.stop="addNodeClick(menuId)">
          <template #icon>
            <PlusOutlined/>
          </template>
        </a-button>
        <a-button type="primary" danger shape="circle" style="float: right;right: 30px"
                  @click.stop="deleteNodeClick(menuId,name)">
          <template #icon>
            <DeleteOutlined/>
          </template>
        </a-button>
      </template>
    </a-directory-tree>

    <a-modal :open="modalConfig.modalVisible" :title="modalConfig.modalTitle" centered :closable="false"
             :maskClosable="false">
      <template #footer>
        <a-button key="back" @click="modalCancelClick">取消</a-button>
        <a-button key="submit" type="primary" @click="modalEnsureClick">
          {{ modalConfig.modalTitle.substring(0, 2) }}
        </a-button>
      </template>
      <a-form :model="modalFormData">
        <a-form-item label="菜单名称：">
          <a-input size="large" v-model:value="modalFormData.name" placeholder="请输入"/>
        </a-form-item>
        <a-form-item label="菜单路径：">
          <a-input size="large" v-model:value="modalFormData.nowPath" placeholder="请输入"/>
        </a-form-item>
        <a-form-item label="菜单图标">
          <a-input size="large" v-model:value="modalFormData.iconTag" placeholder="请输入"/>
        </a-form-item>
        <a-form-item label="菜单顺序">
          <a-input size="large" v-model:value="modalFormData.menuOrder" placeholder="请输入" type="number"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import maskLayer from "@/components/MaskLayer/index.vue"
import {onMounted, ref} from "vue";
import {PlusOutlined, DeleteOutlined, EditOutlined} from "@ant-design/icons-vue";
import {addOrUpdateMenuTree, delMenu, getMenuTree} from "@/api/basicsApi/systemManage/MenuManage.ts";
import {message, Modal} from "ant-design-vue";
import {ModalFormDataType} from "@/interface/basicsInterface/systemManage";

const isLoading = ref(false) // 页面加载状态
const treeNodeData = ref([]) // 节点数据
const modalConfig = ref({
  modalVisible: false, // 弹窗显示
  modalTitle: "",// 弹窗提示文字
})
const modalFormData = ref<ModalFormDataType>({
  name: "", // 名称
  parentMenuId: "-1", // 父节点id
  menuId: null, // 当前节点id
  nowPath: "", // 路径
  iconTag: "", // 图标名称
  menuOrder: null, // 排序
})

onMounted(async () => {
  getMenuTreeFun()
})

// 获取所有节点数据
function getMenuTreeFun() {
  getMenuTree().then((res: any) => {
    treeNodeData.value = res.data.children
  })
}

function addNodeClick(parentMenuId: string) {
  modalConfig.value = {
    modalVisible: true,
    modalTitle: "新增子节点菜单",
  }
  modalFormData.value = {
    name: "",
    parentMenuId: parentMenuId,
    menuId: null,
    nowPath: "",
    iconTag: "",
    menuOrder: null,
  }
}

function deleteNodeClick(menuId: string, name: string) {
  Modal.confirm({
    title: `你确定要删除菜单${name}吗？`,
    content: "如果存在子菜单或者存在于角色绑定的关联则无法删除",
    centered: true,
    onOk() {
      isLoading.value = true
      delMenu(menuId).then((res: any) => {
        message.success(res.msg)
        isLoading.value = false
        getMenuTreeFun()
      })
      isLoading.value = false
    },
    onCancel() {
    },
    class: 'test',
  });
}

function updateNodeClick(name: string, menuId: null, nowPath: string, iconTag: string, parentMenuId: string, menuOrder: number) {
  modalConfig.value = {
    modalVisible: true,
    modalTitle: "修改菜单",
  }
  modalFormData.value = {
    name: name,
    parentMenuId: parentMenuId,
    menuId: menuId,
    nowPath: nowPath,
    iconTag: iconTag,
    menuOrder: menuOrder,
  }
}

// 弹窗取消按钮
function modalCancelClick() {
  modalConfig.value.modalVisible = false
}

// 弹窗确定按钮
function modalEnsureClick() {
  modalConfig.value.modalVisible = false
  isLoading.value = true
  if (modalConfig.value.modalTitle.substring(0, 2) === '新增') {
    addOrUpdateMenuTree(
        modalFormData.value.menuId,
        modalFormData.value.name,
        modalFormData.value.parentMenuId,
        modalFormData.value.nowPath,
        modalFormData.value.iconTag,
        modalFormData.value.menuOrder
    ).then((res: any) => {
      message.success(res.msg)
      isLoading.value = false
      getMenuTreeFun()
    }).catch(() => {
      isLoading.value = false
    })
  } else {
    addOrUpdateMenuTree(
        modalFormData.value.menuId,
        modalFormData.value.name,
        modalFormData.value.parentMenuId,
        modalFormData.value.nowPath,
        modalFormData.value.iconTag,
        modalFormData.value.menuOrder
    ).then((res: any) => {
      // console.log(res)
      message.success(res.msg)
      getMenuTreeFun()
      isLoading.value = false
    }).catch(() => {
      isLoading.value = false
    })
  }
}
</script>

<style scoped lang="scss">
@use "@/styles/TreeCss";
@use "@/styles/PageCss";
</style>
